<template>
  <el-dialog
    v-model="showModel"
    title="选择优惠券"
    width="1000px"
    @opened="handleOpened"
  >
    <div class="search">
      <el-form
        :model="searchForm"
        inline
      >
        <el-form-item label="优惠券ID">
          <el-input
            v-model="searchFormModel.couponDefineId"
            clearable
            placeholder="请输入优惠券ID"
          />
        </el-form-item>

        <el-form-item label="优惠券名称">
          <el-input
            v-model="searchFormModel.couponDefineName"
            clearable
            placeholder="请输入优惠券名称"
          />
        </el-form-item>
      </el-form>
    </div>

    <LayoutTable
      ref="tableRef"
      :url="url"
      :param="{...searchFormModel, ...props.searchForm}"
    >
      <el-table-column
        label="优惠券ID"
        width="100"
        prop="id"
      />
      <el-table-column
        label="优惠券名称"
        width="200"
        prop="couponName"
      />
      <el-table-column
        label="优惠券类型"
        width="140"
      >
        <template #default="props">
          {{ getCouponTypeName(props.row.couponType) }}
        </template>
      </el-table-column>

      <el-table-column
        label="剩余数量"
        width="210"
      >
        <template #default="{row}">
          {{ row.remainderNum }}
        </template>
      </el-table-column>

      <el-table-column
        label="领取时间"
        width="210"
      >
        <template #default="props">
          <div
            class="claim-time-range"
            :class="{'outof-claim-time-range': checkOutofTimeRange(props.row)}"
          >
            <div>{{ formatTime(props.row.receiveStartTime) }} 至</div>
            <div>{{ formatTime(props.row.receiveEndTime) }}</div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="创建时间"
        width="180"
      >
        <template #default="{row}">
          {{ formatTime(row.createTime) }}
        </template>
      </el-table-column>

      <el-table-column
        label="是否上架"
        width="180"
      >
        <template #default="{row}">
          {{ row.isOnline ? "是" : "否" }}
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        fixed="right"
        width="100"
      >
        <template #default="{row}">
          <el-button
            type="primary"
            @click="confirm(row)"
          >
            选择
          </el-button>
        </template>
      </el-table-column>
    </LayoutTable>

    <template #footer>
      <el-button @click="showModel = false">
        关闭
      </el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import type { ICouponSelectorRow } from "@/api/modules/marketingTool"
import moment from "moment"
import { useCouponType } from "@/views/marketingTool/compositions/useCouponType"

interface ISearchForm {
  mallId?: number;
  actId?: number;
}

const props = withDefaults(defineProps<{
  show: boolean;
  url: string;
  searchForm: ISearchForm
}>(), {
  url: 'mall/admin/product/getOriginalCouponInfo',
  searchForm: () => ({
    // mallId: undefined,
  }),
})

const emits = defineEmits<{
  (e: "update:show", value: boolean):void;
  (e: "confirm", value: ICouponSelectorRow): void;
}>()

const { getCouponTypeName } = useCouponType()

const showModel = computed({
  get() {
    return props.show
  },
  set(value) {
    emits("update:show", value)
  }
})

const searchFormModel = ref({
  couponDefineId: "",
  couponDefineName: "",
})

const formatTime = (timestamp: number) => {
  return timestamp ? moment(timestamp).format("YYYY.MM.DD HH:mm:ss") : ''
}

const checkOutofTimeRange = (row: ICouponSelectorRow) => {
  const now = +new Date();
  // console.log('checkOutofTimeRange', now < row.receiveStartTime || now > row.receiveEndTime)
  return now < row.receiveStartTime || now > row.receiveEndTime
}

const confirm = (row: ICouponSelectorRow) => {
  emits("confirm", row)
}


const handleOpened = () => {

}
</script>

<style scoped lang="scss">

</style>